import React from 'react';
import { Tooltip, Tag } from 'antd';
import moment from 'moment';
import { LEAVE_STATUS, LEAVE_TYPE, LEAVE_STATUS_OBJ_TEXT } from './dictionary';
/**
 *  渲染离职列表状态
 *
 */
const empty = '';
export function renderLeaveStatus(status, record) {
    const item = LEAVE_STATUS.find(_ => _.value === status);
    if (!item) {
        return empty;
    }
    let title = '';
    if (record.handoverMatterDetail) {
        const array = record.handoverMatterDetail.sort((a, b) => a.handoverSeq - b.handoverSeq);
        title = array.reduce(
            (pre, curr) =>
                `${pre}${pre === '' ? '' : ' → '}${LEAVE_STATUS_OBJ_TEXT[curr.handoverType]}${
                    curr.handoverType === status ? '【当前】' : ''
                }`,
            ''
        );
    }
    // 根据状态对应下标值映射颜色，为空则使用默认颜色。
    return (
        <Tooltip placement="top" title={title}>
            <span>{item.text}</span>
        </Tooltip>
    );
}
const trimZero = (str, split = '-') =>
    str
        .split(split)
        .map(item => (item.startsWith('0') ? item.substr(1) : item))
        .join(split);

/**
 * 显示简短日期，hover显示完整日期
 * 例: 9-2  10-12
 */
export function renderShortDate(dateStr, formatStr = 'MM-DD') {
    if (!dateStr) {
        return empty;
    }
    const short = trimZero(moment(dateStr).format(formatStr));
    return (
        <Tooltip placement="top" title={dateStr}>
            <span>{short}</span>
        </Tooltip>
    );
}
/**
 * 渲染名字和已读标识(注：2021.06.04加入黑名单标识显示判断 By Tofu)
 * 圆点(未读) + 姓名
 * @param {*} name 姓名
 * @param {*} readFlag 是否已读
 */
export function renderNameWithReadFlag(name, readFlag, showReadFlag, hasBlackList) {
    if (!name) {
        return empty;
    }
    const nameEle = <span style={{ marginLeft: '10px', cursor: 'pointer', whiteSpace: 'nowrap' }}>{name}</span>;
    return (
        <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'nowrap' }}>
            <div
                style={{
                    width: 6,
                    height: 6,
                    borderRadius: '50%',
                    background: !readFlag && showReadFlag ? '#FFA22D' : 'transparent'
                }}
            ></div>
            {nameEle}
            {hasBlackList && (
                <Tag color="black" style={{ marginLeft: 8 }}>
                    黑名单
                </Tag>
            )}
        </div>
    );
}

/**
 * 渲染名字和已读标识
 * 与 renderNameWithReadFlag一起使用
 * @param {*} name 姓名
 * @param {*} readFlag 是否已读
 */
export function renderNameWithReadFlagTitle(title) {
    return <span style={{ marginLeft: '16px' }}>{title}</span>;
}

/** 渲染离职类型 */
export function renderLeaveType(type, statusHover) {
    const item = LEAVE_TYPE.find(_ => _.value === type);
    if (!item) {
        return empty;
    }
    // 根据状态对应下标值映射颜色，为空则使用默认颜色。
    return (
        <Tooltip
            placement="top"
            title={
                statusHover.indexOf('‖‖') !== -1 ? (
                    <div style={{ whiteSpace: 'pre-wrap' }}>
                        {statusHover.split('‖‖')[0]}
                        <br />
                        {statusHover.split('‖‖')[1]}
                    </div>
                ) : (
                    statusHover
                )
            }
        >
            <span style={{ color: item.color }}>{item.text}</span>
        </Tooltip>
    );
}
// 渲染hover
export function renderCustomText(text, hoverTitle) {
    return (
        <Tooltip placement="top" title={hoverTitle}>
            <span>{text}</span>
        </Tooltip>
    );
}
export function renderDealPeople(val) {
    if (!val) return empty;

    const nameArray = val?.split('、');
    if (nameArray?.length >= 3) {
        return (
            <Tooltip placement="top" title={val}>
                <span>{`${nameArray.slice(0, 2).join('、')}等${nameArray.length}人`}</span>
            </Tooltip>
        );
    }
    return (
        <Tooltip placement="top" title={val}>
            <span>{val}</span>
        </Tooltip>
    );
}
